<template>

  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>


        <el-form-item label="日期:" prop="add_time">
          <el-date-picker
            type="date"
            clearable
            v-model="where.add_time"

            placeholder="请输入开始时间"/>

        </el-form-item>


        <el-date-picker
          type="date"
          clearable
          style="padding-left: 50px; margin-left: 26px;"
          v-model="where.end_time"

          placeholder="请输入结束时间"/>

        <el-button
          type="primary"
          icon="el-icon-search"
          class="ele-btn-icon"
            style=" margin-left: 224px; margin-top: 10px;"
          @click="getIndexDataList()">查询
        </el-button>

      </el-form>
      <!-- 数据表格 -->
    </el-card>
    <el-card class="analysis-chart-card" shadow="never">
      <div slot="header" class="ele-cell">
        <div class="ele-cell-content">合计(默认仅展示7天)</div>
        <el-tooltip content="合计" placement="top">
          <i
            class="el-icon-_question ele-text-placeholder"
            style="cursor: pointer;">
          </i>
        </el-tooltip>
      </div>
      <div class="analysis-chart-card-num" v-html="shopprice"></div>

    </el-card>

    <div v-for="item in orderlist" :key="item.id" style="margin-top: 20px;">


      <el-card class="analysis-chart-card" shadow="never">

        <div style="weight:500;height:300px; ;box-sizing:border-box;">
          <p style="color:#6E7C89;margin-top: 15px;">日期:{{ item.create_time }}</p>
          <router-link to="/order/order" class="app-link-block">
            <div style="margin-bottom: 3px; margin-top: 15px">门店收益(含续单)：{{ item.order_price }}</div>
          </router-link>
          <router-link to="/order/order" class="app-link-block">
            <div style="margin-bottom: 3px; margin-top: 15px">订单量：{{ item.ordersum }}</div>
          </router-link>
         <router-link to="/order/renewalorder" class="app-link-block">
            <div style="margin-bottom: 3px; margin-top: 15px">门店续单收益：{{ item.renewalorder_price }}</div>
          </router-link>
          <router-link to="/order/recharge" class="app-link-block">
            <div style="margin-bottom: 3px; margin-top: 15px">门店充值收益：{{ item.user_price }}</div>
          </router-link>
          <router-link to="/order/pricecouponorder" class="app-link-block">
            <div style="margin-bottom: 3px; margin-top: 15px">团购卷收益：{{ item.coupon_price }}</div>
          </router-link>
          <router-link to="/order/cardcouponorder" class="app-link-block">
            <div style="margin-bottom: 3px; margin-top: 15px">周卡收益：{{ item.cardcoupon }}</div>
          </router-link>
        </div>
      </el-card>


    </div>
  </div>

</template>

<script>

import EleChart from 'ele-admin/packages/ele-chart';
import EleWordCloud from 'ele-admin/packages/ele-word-cloud';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart, EleWordCloud},
  data() {
    return {
      // 支付笔数

      where: {},

      orderlist: [],
    };
  },

  mounted() {

    this.getIndexDataList();
  },

  methods: {
    /* 获取支付笔数数据 */


    getIndexDataList() {

      let add_time = this.where.add_time;
      let end_time = this.where.end_time;
      this.$http.post('/index/getIndexDataList', {add_time: add_time, end_time: end_time}).then(res => {


        if (res.data.code === 0) {
          this.orderlist = res.data.data.order;
          this.shopprice = res.data.data.shopprice;

        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
        console.error(e);
        this.$message.error(e.message);
      });
    }
  },


}

</script>

<style scoped>
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}
.analysis-chart-card{
   height: 250px;
}
.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
</style>
